<template>
  <div style="width: 80%; margin: 0 auto;padding: 0 0 60px 0">
    <div class="basic-box" style="margin: 20px auto;">
      <div class="com-detail">
        <div style="display: flex;flex-direction: row;">
          <el-image class="com-icon" src="https://img.bosszhipin.com/beijin/mcs/bar/brand/92025.jpg?x-oss-process=image/resize,w_120,limit_0" />
          <div style="display: flex;flex-direction: column;margin: 10px;width: calc(100% - 120px)">
            <div class="com-name">{{ company.name }}</div>
            <div class="text-info" style="display: flex;flex-direction: row;margin: 5px">
              <div class="com-detail text-info">{{ company.label }}</div>
            </div>
            <div class="text-info" style="margin: 10px" v-html="company.intro"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">招聘人信息 <i class="el-icon-watch" /></div>
      <div v-for="(item, index) in hrList" :key="index" class="hr">
        <div style="display: flex;flex-direction: row;align-items: center;height: 60px;justify-content: space-between;">
          <div style="display: flex;flex-direction: row;align-items: center;height: 60px">
            <el-image class="hr-avatar" src="https://img.bosszhipin.com/beijin/mcs/bar/brand/92025.jpg?x-oss-process=image/resize,w_120,limit_0" />
            <div class="" style="display: flex;flex-direction: column">
              <div class="hr-name">{{ item.name }}</div>
              <div class="text-info" style="display: flex;flex-direction: row;align-items: center;line-height: 20px">
                <div class="hr-detail">{{ item.label }}</div>
              </div>
            </div>
          </div>
          <div>
            <el-button v-waves type="primary" icon="el-icon-chat-dot-round" circle plain @click="toChat(item.id)" />
          </div>
        </div>
        <div style="width: 99%;margin: 5px auto"><el-divider><span class="text-primary" /></el-divider></div>
      </div>
      <div><pagination :total="listQuery.hr.total" :page.sync="listQuery.hr.page" :limit.sync="listQuery.hr.limit" /></div>
    </div>
    <div class="basic-box">
      <div class="text-primary" style="font-weight: bold">招聘岗位 <i class="el-icon-watch" /></div>
      <div class="positions">
        <div v-for="(item, index) in positions" :key="index" class="position-item">
          <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;" @click="toDetail(item.id)">
            <div style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start">
              <div class="position-item-name text-danger">
                {{ item.name }}
              </div>
              <div class="position-item-detail text-info">
                <span class="position-detail text-info">{{ item.label }}</span>
              </div>
            </div>
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: flex-start" class="text-warning position-item-wage">
              {{ item.wageMin }}-{{ item.wageMax }}元/月
            </div>
          </div>
        </div>
      </div>
      <div><pagination :total="listQuery.position.total" :page.sync="listQuery.position.page" :limit.sync="listQuery.position.limit" /></div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getHrList } from '@/api/user'
import { fetchComInfo } from '@/api/com'
import { getPositionByCid } from '@/api/position'
export default {
  name: 'PositionDetail',
  components: { Pagination },
  data() {
    return {
      id: this.$route.query.id,
      aMap: null,
      company: {
        id: -1,
        name: '网易',
        logo: '',
        description: '网易 (NASDAQ: NTES)，1997年由丁磊先生在广州创办、2000年在美国NASDAQ股票交易所挂牌上市，是中国领先的互联网技术公司，在开发互联网应用、服务等方面始\n' +
          '              终保持中国业界领先地位。本着对中国互联网发展强烈的使命感，缔造美好生活的愿景，网易利用最先进的互联网技术，加强人与人之间信息的交流和共享，为海量用户提供\n' +
          '              优质的产品和服务，始终秉持着"以匠心、致创新"的理念，通过科技创新改变生活。',
      },
      hrList: [
        { id: -1, name: '张三', group: '狂徒项目组' }
      ],
      positions: [
        { id: -1, name: '带薪拉屎', city: '广州', wage: '20K' }
      ],
      listQuery: {
        hr: {
          total: 10,
          page: 1,
          limit: 5
        },
        position: {
          total: 10,
          page: 1,
          limit: 5
        }
      }
    }
  },
  mounted() {
    this.getDetail()
    this.initAMap()
  },
  methods: {
    toChat(id) {
      window.open('/#/inform/p2p/' + (this.$store.getters.id < id ? this.$store.getters.id : id) + '_' + (this.$store.getters.id > id ? this.$store.getters.id : id) + '/' + new Date().getTime())
    },
    initAMap() {
      var marker = new AMap.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [116.405467, 39.907761]
      })
      this.aMap = new AMap.Map('container',
        {
          zoom: 11,
          center: [116.397428, 39.90923],
          viewMode: '3D'
        })
      this.aMap.add(marker)
    },
    toDetail(id) {
      window.open('#/index/positionDetail?id=' + id)
    },
    getDetail() {
      const self = this
      fetchComInfo(self.id).then(
        orgRes => {
          self.company = orgRes.data.items
          self.listQuery.hr.cid = self.company.id
          self.listQuery.position.cid = self.company.id
          getHrList(self.listQuery.hr).then(
            HrRes => {
              self.hrList = HrRes.data.items
              self.listQuery.hr.total = HrRes.data.total
              getPositionByCid(self.listQuery.position).then(
                posRes => {
                  self.positions = posRes.data.items
                  self.listQuery.position.total = posRes.data.total
                }
              )
            }
          )
        }
      )
    }
  }
}
</script>

<style scoped lang="scss">
.basic-box {
  width: 100%;
  padding: 10px 20px;
}
.com-detail{
  display: flex;
  flex-direction: row;
  align-items: center;
  .com-icon{
    width: 100px;
    height: 100px;
  }
  .com-name{
    font-size: 25px;
    font-weight: bold;
    margin: 0 10px;
  }
  .com-detail{
    margin-left: 5px;
  }
}
.hr{
  margin: 10px 0;
  .hr-avatar{
    margin-right: 15px;
    width: 35px;
    height: 35px;
  }
  .hr-name{
    font-size: 22px;
  }
  .hr-detail{
    margin:5px 5px 0 0;
  }
}
.inner-html{
  line-height: 30px;
  padding: 10px;
}
.map{
  width: 50%;
  height: 400px;
  margin: 20px;
}
.el-divider--horizontal{
  margin: 0;
}
.pagination-container{
  margin: 0;
  padding: 0;
}
.position-item{
  border: none;
  height: 100px;
  width: 100%;
  border-bottom: 1px solid #AAAAAA;
}
</style>
